<template>
  <div class="rankList" :style="{ width: props.width }">
    <el-table :data="props.list.records" class="table no-background" :row-class-name="getClassName">
      <el-table-column type="index" label="排名" align="center" width="100%" :index="indexMethod"></el-table-column>
      <el-table-column label="用户">
        <template #default="scope">
          <div class="avatar-box" :class="scope.$index === 0 && props.list.current === '1'
            ? 'no1'
            : scope.$index === 1 && props.list.current === '1'
              ? 'no2'
              : scope.$index === 2 && props.list.current === '1'
                ? 'no3'
                : ''
            ">
            <el-avatar class="avatar" :src="$getAvatarUrl(scope.row.avatar)">
              <i class="iconfont icon-zhanghao-"></i>
            </el-avatar>
            <div class="avatar-username">
              {{ scope.row.username }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="昵称" align="center">
        <template #default="scope">
          <div class="nickname" :style="{
            color:
              scope.$index === 0 && props.list.current === '1'
                ? 'rgb(249,213,35)'
                : scope.$index === 1 && props.list.current === '1'
                  ? 'rgb(198,198,198)'
                  : scope.$index === 2 && props.list.current === '1'
                    ? 'rgb(197,149,96)'
                    : '',
          }">
            <img class="img" src="../../../assets/icon/svg/guanjun.svg" alt=""
              v-show="scope.$index === 0 && props.list.current === '1'" />
            <img class="img" src="../../../assets/icon/svg/yajun.svg" alt=""
              v-show="scope.$index === 1 && props.list.current === '1'" />
            <img class="img" src="../../../assets/icon/svg/jijun.svg" alt=""
              v-show="scope.$index === 2 && props.list.current === '1'" />

            {{ scope.row.nickname || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分数" prop="score" align="center" v-if="props.listType === 'OI'"></el-table-column>
      <el-table-column label="通过/总数" align="center">
        <template #default="scope">
          <div>{{ scope.row.acProblemTotal }}/{{ scope.row.problemTotal }}</div>
        </template>
      </el-table-column>
      <el-table-column label="通过率" align="center">
        <template #default="scope">
          <n-tooltip trigger="hover">
            <template #trigger>
              <div class="ACrate">
                {{ getACRate(scope.row.acJudgeTotal, scope.row.judgeTotal) }}
              </div>
            </template>
            <div>{{ scope.row.acJudgeTotal }}/{{ scope.row.judgeTotal }}</div>
          </n-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="个性签名" align="center" width="400px">
        <template #default="scope">
          <div class="signature">{{ scope.row.signature }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  props: {
    list: {
      type: Object,
      default: {
        records: [],
        total: 10,
      },
    },
    width: String,
    listType: {
      type: String,
      default: "ACM",
    },
  },
  setup(props, context) {
    onMounted(() => {
    });
    const currentsPage = ref(1);
    const getACRate = (actotal, total) => {
      if (total === 0 || actotal === 0) {
        return "0%";
      }
      return ((actotal / total) * 100).toFixed(2) + "%";
    };

    const indexMethod = (index) => {
      return (props.list.current - 1) * props.list.size + index + 1;
    };

    const getClassName = (data) => {
      if (data.rowIndex == 0) {
        return "no1-row";
      } else if (data.rowIndex == 1) {
        return "no2-row";
      } else if (data.rowIndex == 2) {
        return "no3-row";
      }
      return "";
    };
    return {
      props,
      currentsPage,
      getACRate,
      indexMethod,
      getClassName
    };
  },
});
</script>

<style lang="less" scoped>
.rankList {
  width: 100%;

  .search {
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;

    .search-input {
      width: 25%;
      margin: auto 1% auto auto;
    }
  }

  .table {
    width: 100%;
    min-height: 500px;

    .avatar-box {
      display: flex;
      height: 30px;

      .avatar {
        height: 30px;
        width: 30px;
        margin: auto 5px auto 0;
      }

      .avatar-username {
        color: #888;
        font-size: 14px;
        margin: auto 5px;
      }
    }

    .nickname {
      display: flex;
      justify-content: center;

      .img {
        width: 22px;
        height: 22px;
        margin: auto 3px;
      }
    }

    .ACrate {
      font-size: 14px;
    }

    .signature {
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .footer {
    display: flex;
    width: 100%;
    height: 40px;

    .pagination {
      margin: auto;
    }
  }
}

.no1 {
  height: 55px !important;

  .avatar {
    height: 50px !important;
    width: 50px !important;
  }

  .avatar-username {
    font-size: 22px !important;
    font-weight: 650;
  }
}

.no2 {
  height: 45px !important;

  .avatar {
    height: 40px !important;
    width: 40px !important;
  }

  .avatar-username {
    font-size: 18px !important;
    font-weight: 600;
  }
}

.no3 {
  height: 40px !important;

  .avatar {
    height: 35px !important;
    width: 35px !important;
  }

  .avatar-username {
    font-size: 16px !important;
    font-weight: 550;
  }
}
</style>
